<template>
  <SelectDialog title="执行监听器设置" :append-to-body="true" :show="true" @on-ok="saveListeners" @on-cancel="cancel">
    <el-row>
      <el-col :span="12">
        <el-table :data="executionTable.listeners" border height="200" :highlight-current-row="true" @row-click="clickRow">
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column property="eventTypeLabel" label="事件类型" />
          <el-table-column property="listenerValueLabel" label="监听器类型" />
          <el-table-column property="listenerValue" label="监听值" />
        </el-table>
        <div style="textAlign:right">
          <el-button-group style="margin-left:5px;margin-right:0px;margin-top:8px">
            <el-button type="primary" icon="el-icon-minus" @click="removeListener" />
            <el-button type="primary" icon="el-icon-plus" @click="newListener" />
          </el-button-group>
        </div>
      </el-col>
      <el-col :span="11" :offset="1">
        <div v-if="isShow === true">
          <el-form-item label="事件类型">
            <el-select v-model="listener.eventType" placeholder="请选择">
              <el-option v-for="(item ,index) in ExecutionListenerTypes" :key="index" :label="item.eventTypeLabel" :value="item.eventType" />
            </el-select>
          </el-form-item>
          <el-form-item label="监听器类型">
            <el-select v-model="listener.listenerType" placeholder="请选择">
              <el-option v-for="(item ,index) in ListenerTypes" :key="index" :label="item.listenerValueLabel" :value="item.listenerType" />
            </el-select>
          </el-form-item>
          <el-form-item :label="listener.listenerValueLabel">
            <el-input v-model="listener.listenerValue" />
          </el-form-item>
        </div>
        <div v-else>
          未选择条件
        </div>
      </el-col>
    </el-row>
  </SelectDialog>
</template>
<script>
import SelectDialog from '@neu/biz-core/components/SelectDialog'
import { ExecutionListenerTypes, ListenerTypes } from '../js/const/bpmnConsts.js'
import { isBlank } from '../js/util/CommonUtils'
const uuid = require('uuid/v1')
export default {
  name: 'ExecutionListener',
  components: {
    SelectDialog
  },
  props: {
    table: {
      required: false,
      type: Object,
      default: () => {
        return {
          listeners: [],
          selectedRow: null
        }
      }
    }
  },
  data() {
    return {
      isShow: false,
      listener: {
        eventType: '',
        eventTypeLabel: '',
        listenerType: '',
        listenerValueLabel: '',
        listenerValue: ''
      },
      executionTable: JSON.parse(JSON.stringify(this.table)),
      ExecutionListenerTypes: ExecutionListenerTypes,
      ListenerTypes: ListenerTypes
    }
  },
  watch: {
    'listener.eventType': {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          const currentRow = this.executionTable.selectedRow
          const index = this.executionTable.listeners.findIndex(item => { return item.id === currentRow.id })
          const ind = ExecutionListenerTypes.findIndex(item => { return item.eventType === newVal })
          if (ind !== -1) {
            currentRow.eventTypeLabel = ExecutionListenerTypes[ind].eventTypeLabel
          }
          currentRow.eventType = newVal
          this.$set(this.executionTable.listeners, index, currentRow)
        }
      }
    },
    'listener.listenerType': {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          const ind = ListenerTypes.findIndex(item => { return item.listenerType === newVal })
          if (ind !== -1) {
            this.listener.listenerValueLabel = ListenerTypes[ind].listenerValueLabel
          }
          const currentRow = this.executionTable.selectedRow
          const index = this.executionTable.listeners.findIndex(item => { return item.id === currentRow.id })
          currentRow.listenerType = newVal
          currentRow.listenerValueLabel = this.listener.listenerValueLabel
          this.$set(this.executionTable.listeners, index, currentRow)
        }
      }
    },
    'listener.listenerValue': {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          const currentRow = this.executionTable.selectedRow
          const index = this.executionTable.listeners.findIndex(item => { return item.id === currentRow.id })
          currentRow.listenerValue = newVal
          this.$set(this.executionTable.listeners, index, currentRow)
        }
      }
    },
    'executionTable.selectedRow': {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        if (newVal) {
          this.isShow = true
          this.listener.eventType = newVal.eventType
          const ind = ExecutionListenerTypes.findIndex(item => { return item.eventType === newVal })
          if (ind !== -1) {
            this.listener.eventTypeLabel = ExecutionListenerTypes[ind].eventTypeLabel
          }
          this.listener.listenerType = newVal.listenerType
          this.listener.listenerValueLabel = newVal.listenerValueLabel
          this.listener.listenerValue = newVal.listenerValue
        } else {
          this.isShow = false
        }
      }
    }
  },
  methods: {
    newListener() {
      this.executionTable.listeners.push({
        id: uuid(),
        eventType: '',
        listenerType: '',
        listenerValueLabel: '',
        listenerValue: ''
      })
    },
    clickRow(row, column, event) {
      this.executionTable.selectedRow = row
    },
    removeListener() {
      if (this.executionTable.selectedRow !== undefined) {
        // 删除选定的数组
        const index = this.executionTable.listeners.findIndex(item => { return item.id === this.executionTable.selectedRow.id })
        this.executionTable.listeners.splice(index, 1)
        this.executionTable.selectedRow = undefined
      }
    },
    saveListeners() {
      if (this.validateConditions(this.executionTable.listeners)) {
        this.$emit('saveListener', this.executionTable.listeners)
      }
    },
    cancel() {
      this.$emit('cancel')
    },
    validateConditions(conditions) {
      const that = this
      let flag = true
      conditions.forEach(function(condition, index) {
        if (!flag) return
        index = index + 1
        if (isBlank(condition.eventType)) {
          that.$message({
            showClose: true,
            message: '第' + index + '个条件,事件类型不能为空',
            type: 'error'
          })
          flag = false
          return
        }
        if (isBlank(condition.listenerType)) {
          that.$message({
            showClose: true,
            message: '第' + index + '个条件,监听类型不能为空',
            type: 'error'
          })
          flag = false
          return
        }
        if (isBlank(condition.listenerValue)) {
          that.$message({
            showClose: true,
            message: '第' + index + '个条件,监听值不能为空',
            type: 'error'
          })
          flag = false
          return
        }
      })
      return flag
    }
  }
}
</script>
